<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 65 65"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path d="M27 45.5a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z" stroke="#fff" stroke-width="4" stroke-miterlimit="10"/><g stroke-miterlimit="10"><path d="M15.123 15.977a4.738 4.738 0 1 0 0-9.477 4.738 4.738 0 0 0 0 9.477Z" stroke="#fff" stroke-width="4"/><path data-follow-stroke="currentColor" d="M9.2 24.728s1.054-4.54 3.16-5.593c2.105-1.052 4.211-1.052 6.317 0 2.106 1.053 3.16 5.593 3.16 5.593" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" :stroke="_stroke"/><path d="M54.807 26.638a4.146 4.146 0 1 0 0-8.292 4.146 4.146 0 0 0 0 8.292Z" stroke="#fff" stroke-width="4"/><path data-follow-stroke="currentColor" d="M49.477 34.93s.888-3.37 2.665-4.152c1.777-.782 3.554-.782 5.33 0 1.777.782 2.666 4.151 2.666 4.151M19.657 57.84s1.053-4.539 3.159-5.592 4.212-1.053 6.318 0 3.159 5.591 3.159 5.591m17.436-41.982C45.286 10.616 38.655 7.29 31.247 7.29a24.17 24.17 0 0 0-8.3 1.46m12.968 46.526c8.648-1.689 15.649-7.978 18.35-16.217M7.12 29.389a24.504 24.504 0 0 0-.091 2.119c0 8.396 4.273 15.794 10.763 20.14" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" :stroke="_stroke"/></g></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Frame2B761jgb6 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
